<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.set</title>
  <script src="vue.js"></script>
</head>
<!--
Vue递归进行对象和属性数据代理进行监测
-->
<body>
<div id="root">
    <button @click="add">add friend jerry sex</button>
    <h2>学校名：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <h2>学生姓名：{{stu.name}}</h2>
    <h2>学生年龄：{{stu.age}}</h2>
    <h2>
        <ul>
            <li v-for="p in friends">姓名：{{p.name}}   年龄：{{p.age}}--{{p.sex}}</li>
        </ul>
    </h2>

</div>
</body>
<script type="text/javascript">
    const  vm = new Vue({
        el:"#root",
        data:{
            name:"铁建",
            address:'Bj',
            stu:{
                name:'tom',
                age:30
            },
            friends:[
                {name:'jerry',age:15},
                {name:'betty',age:16}
            ]

        },
        methods:{
            add(){
                // Vue.set(this.friends[0],'sex','男')
                this.$set(this.friends[0],'sex','男')
            }
        }

    })
</script>

</html>